/**
 * 公告通知组件
 * 
 * 功能描述：
 * - 展示系统公告、通知信息的组件
 * - 支持信息、警告、成功三种类型的通知
 * - 提供不同颜色和图标样式的视觉区分
 * - 响应式设计，适配移动端显示
 * 
 * 使用场景：
 * - 系统公告展示
 * - 重要通知提醒
 * - 操作结果反馈
 * - 活动宣传信息
 * 
 * 作者：系统
 * 创建时间：2024
 */

import { Volume2, AlertCircle, CheckCircle, Info } from 'lucide-react';

// 内联类型定义
interface AnnouncementType {
  id: string;
  content: string;
  type: 'info' | 'warning' | 'success';
}

interface AnnouncementProps {
  announcement: AnnouncementType;
}

export default function Announcement({ announcement }: AnnouncementProps) {
  // 根据类型获取样式配置
  const getTypeStyles = (type: string) => {
    switch (type) {
      case 'success':
        return {
          bg: 'bg-gradient-to-r from-green-50 to-emerald-50',
          border: 'border-green-200',
          iconBg: 'bg-green-500',
          textColor: 'text-green-800',
          icon: <CheckCircle size={16} />
        };
      case 'warning':
        return {
          bg: 'bg-gradient-to-r from-orange-50 to-red-50',
          border: 'border-orange-200',
          iconBg: 'bg-orange-500',
          textColor: 'text-orange-800',
          icon: <AlertCircle size={16} />
        };
      case 'info':
      default:
        return {
          bg: 'bg-gradient-to-r from-blue-50 to-cyan-50',
          border: 'border-blue-200',
          iconBg: 'bg-blue-500',
          textColor: 'text-blue-800',
          icon: <Info size={16} />
        };
    }
  };

  const styles = getTypeStyles(announcement.type);

  return (
    <div className={`mx-4 px-4 py-3 ${styles.bg} border ${styles.border} rounded-xl shadow-sm`}>
      <div className="flex items-center space-x-3">
        <div className="flex-shrink-0">
          <div className={`w-8 h-8 ${styles.iconBg} rounded-full flex items-center justify-center`}>
            <span className="text-white">
              {styles.icon}
            </span>
          </div>
        </div>
        <div className="flex-1">
          <span className={`text-sm ${styles.textColor} font-medium leading-relaxed`}>
            {announcement.content}
          </span>
        </div>
      </div>
    </div>
  );
} 